import React from "react";
import R1 from "@/components/router/R1.jsx";
import R2 from "@/components/router/R2.jsx";
import LinkTest from "@/components/router/LinkTest";
import LazyRouter from "@/components/router/LazyRouter";
import QueryParams from "@/components/router/QueryParams";
import SearchParams from "@/components/router/SearchParams";


import {
  Outlet,
  HashRouter,
  Route,
  Link,
  Routes,
  useNavigate,
} from "react-router-dom";
import * as antd from "antd";
class RouterTest extends React.Component {
  constructor(props) {
    super(props);
  }

  jump = () => {
    let navigate = useNavigate();
    navigate("/linkTest");
  };
  render() {
    return (
      <div>
        <h1>Router Test</h1>
        <Link to="r1">R1</Link>
        <antd.Divider type="vertical"></antd.Divider>
        <Link to="r2">R2</Link>
        <antd.Divider type="vertical"></antd.Divider>
        <Link to="linkTest">LinkTest</Link>
        <antd.Divider type="vertical"></antd.Divider>
        <Link to="lazyRouter">lazyRouter</Link>
        <antd.Divider type="vertical"></antd.Divider>
        <Link to="queryParams/ssss">QueryParams</Link>
        <antd.Divider type="vertical"></antd.Divider>
        <Link to="SearchParams?id=5">SearchParams</Link>
        
        <Routes>
          <Route path="/r1" element={<R1 />} />
          <Route path="/r2" element={<R2 />} />
          <Route path="/linkTest" element={<LinkTest />} />
          <Route path="/queryParams" element={<QueryParams />}>
            <Route path=":id" element={<QueryParams />}>
            </Route>
          </Route>
          <Route path="/searchParams" element={<SearchParams />}></Route>

         
          <Route
            path="/lazyRouter"
            element={
              <React.Suspense fallback={<h1>error not fond</h1>}>
                <LazyRouter />
              </React.Suspense>
            }
          />
        </Routes>
      </div>
    );
  }
}
export default RouterTest;
